<template>
    <Panel class="top-city" second :title="props.title">
        <div class="city-rank">
            <div class="city-list">
                <div class="city-row" v-for="(item, i) in props.rinkList" :key="i">
                    <span :class="i < 3 ? `top-three no-${i + 1}` : 'last'">
                        {{ i > 2 ? i + 1 : null }}
                    </span>
                    <span class="name" v-if="slots.row">
                        <slot name="row" :item="item"></slot>
                    </span>
                    <span v-else> {{ item }}</span>

                </div>
            </div>

        </div>
    </Panel>
</template>

<script >
import Panel from '../../components/panel'
export default {
    name: 'TopCity'
}
</script>
<script setup>
/**
 * @desc   排名前五城市
 * @auther 阳坤
 * @date 2022/10/22
 *
 **/
import { ref, useSlots } from 'vue';

const props = defineProps({
    rinkList: {
        type: Array,
        default: () => []
    },
    title: {
        type: String,
        default: '省内目的地TOP5'
    }
})
const slots = useSlots();

</script>

<style scoped lang="less">
:deep(.mz-panel-content) {
    padding: 15px !important;
}

.top-city {
    // width: 100%;
    // height: 100%;
    display: flex;
    flex-direction: column;

    .center {
        text-align: center;
    }

    .city-rank {
        flex: 1;
        display: flex;
        flex-direction: column;

        .city-list {
            width: 100%;
            height: 100%;
            margin-top: 5px;
        }

        .city-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2px;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px dashed #d1d8e4;

            &:first-child {
                border-top: 1px dashed #d1d8e4;
            }

            .name {
                color: #666;
                padding-right: 22%;
            }
        }

        .top-three {
            width: 15px;
            height: 19px;
        }

        .no-1 {
            background: url('../../assets/images/no-1.png') no-repeat;
            background-size: 100%;
        }

        ;

        .no-2 {
            background: url('../../assets/images/no-2.png') no-repeat;
            background-size: 100%;
        }

        .no-3 {
            background: url('../../assets/images/no-3.png') no-repeat;
            background-size: 100%;
        }

        .last {
            background-color: #93b7d2;
            color: #e4edf4;
            width: 14px;
            height: 14px;
            line-height: 14px;
            border-radius: 50%;
            text-align: center;
            vertical-align: middle;
        }

    }
}
</style>
